.foxui-pagination {
    display: flex;
    justify-content: center;
    align-items: center;

    button:focus {
        outline: none;
    }
}

.foxui-pagination-list {
    display: flex;

    li {
        min-width: $--pagination-size-default;
        height: $--pagination-size-default;
        padding: 0 $--pagination-padding-default;
        text-align: center;
        line-height: $--pagination-line-height-default;
        transition: $--border-transition-base, $--color-transition-base, $--background-color-transition-base;
        border-radius: $--border-radius-base;
        margin: 0 $--pagination-margin-default;

        &.more {
            font-family: 'foxuifont';

            &::before {
                content: '\e89b';
            }

            &.prev:hover {
                &::before {
                    content: '\e8a6';
                }
            }

            &.next:hover {
                &::before {
                    content: '\e8b6';
                }
            }
        }

        &.page:not(.active) {
            cursor: pointer;

            &:hover {
                color: $--color-primary;
            }
        }

        &.active {
            color: $--color-primary;
        }
    }
}

.foxui-pagination__total {
    margin-right: $--padding-base;
    white-space: nowrap;
}

.foxui-pagination__sizes {
    margin-left: $--padding-base;

    .foxui-select {
        width: $--pagination-select-width-default;

        input {
            text-align: center;
        }
    }
}

.foxui-pagination__jump {
    margin-left: $--padding-large;

    .foxui-input-group {
        margin-bottom: 0;

        input {
            width: $--pagination-input-width-default;
            text-align: center;
            margin-right: $--padding-small;
        }
    }
}

.foxui-pagination-next,
.foxui-pagination-prev {
    min-width: $--pagination-size-default;
    margin: 0 $--pagination-padding-default;
}

// solid 类型 分页
.foxui-pagination {
    &.foxui-type-solid {
        .page {
            background-color: $--pagination-solid-background-color;

            &.active {
                background-color: $--color-primary;
                color: #fff;
            }
        }

        button {
            background-color: $--pagination-solid-background-color;

            &:hover {
                background-color: $--pagination-solid-background-color;
            }

            &:focus {
                background-color: $--pagination-solid-background-color;
            }
        }
    }
}

// plain 类型分页
.foxui-pagination {
    &.foxui-type-plain {
        .page {
            border: $--border-base;
            color: $--color-primary;

            &.page:not(.active) {
                &:hover {
                    background-color: $--color-primary-light-9;
                    border-color: $--color-primary-light-2;
                }
            }

            &.active {
                background-color: $--color-primary;
                border-color: $--color-primary;
                color: #fff;
            }
        }

        button {
            border: $--border-base;

            &:hover {
                border: $--border-base;
            }

            &:focus {
                border: $--border-base;
            }
        }
    }
}

// mini 小型分页
.foxui-pagination {
    &.foxui-size-mini {
        li {
            min-width: $--pagination-size-mini;
            height: $--pagination-size-mini;
            padding: 0 $--pagination-padding-mini;
            line-height: $--pagination-line-height-mini;
            margin: 0 $--pagination-margin-mini;
        }

        .foxui-pagination__total {
            margin-right: $--padding-extra-small;
        }

        .foxui-pagination__sizes {
            margin-left: $--padding-extra-small;

            .foxui-select {
                width: $--pagination-select-width-mini;

                input {
                    padding: 0 30px 0 4px;
                }
            }
        }

        .foxui-pagination__jump {
            margin-left: $--padding-base;

            input {
                width: $--pagination-input-width-mini;
                padding: 0 4px;
            }
        }

        .foxui-pagination-next,
        .foxui-pagination-prev {
            min-width: $--pagination-size-mini;
            margin: 0 $--pagination-padding-mini;
        }
    }
}
